<template>
  <div>
    <span class="empty_value" v-if="emptyValue">{{ emptyValue }}</span>
    <span v-else :class="boxClass" :style="itemStyle" @click="itemEvent">
      <i :class="fontClass"></i>
      <u>{{ nValue }}</u>
    </span>
  </div>
</template>
<script setup>
const attrs = useAttrs();

const props = defineProps({
  nValue: {
    type: String,
    default: 'Collection',
  },
  fontClass: {
    type: String,
    default: 'iconfont icon-Collection',
  },
  boxClass:{
    type: String,
    default: 'collection_box',
  },
  itemStyle: {
    type: [String, Object],
    default: '',
  },
  emptyValue: {
    // 为空展示
    type: String,
    default: '',
  },
});

const emits = defineEmits(['itemEvent']);

const emptyValue = computed(() => {
  const { row, prop, valueKey } = attrs;
  if (props.emptyValue && !row[valueKey || prop]) {
    return props.emptyValue;
  }
});

function itemEvent() {
  emits('itemEvent', attrs);
}
</script>
<style lang="scss" scoped>
.empty_value {
  text-align: center;
}
.collection_box {
  background: #f6f6f6;
  padding: 0 6px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-radius: 4px;
  width: fit-content;
  margin: 0 auto;
  i {
    font-size: 24px;
    margin-right: 6px;
  }
  u {
    text-decoration: none;
  }
}

.primary_plain {
  width: 74px;
  height: 20px;
  background: #E9F3F9;
  border-radius: 2px;
}
</style>
